<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise 运用</title>
</head>
<body>
    <form action="" id="user-form"></form>
    <!-- 模板 -->
    <script type="text/template" id="tpl"> 
        <div>
            <label for="user">用户</label>
            <input type="text" id="user" value="{{ user.username }}"><br>
            <label for="age">年龄</label>
            <input type="text" name="" id="age" value="{{ user.age }}"><br>
            <label for="">职业</label>
            <select name="">
                <!-- 遍历jobs数组，绑定职业 -->
                {{ each jobs }} 
                    {{ if user.job === $value.id }}
                        <option value="{{ $value.id }}" selected>{{ $value.name }}</option>
                        {{ else }}
                        <option value="{{ $value.id }}">{{ $value.name }}</option>
                    {{ /if }}
                {{ /each }}
            </select>
        </div>
    </script>
    <script src="../node_modules/art-template/lib/template-web.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script>
        // get请求
        function get(url,callback){ 
            var xml = new XMLHttpRequest();
            xml.onload = function(){
                callback(xml.responseText);
            }
            xml.open('get',url,true);
            xml.send();
        }
        // 获取用户信息 + 职业信息 原生JS方法
        function getUserByJS(){
            get('http://localhost:3000/users/3', function(userdata){
                get('http://localhost:3000/jobs',function(jobdata){
                    let htmlStr = template('tpl',{
                        user: JSON.parse(userdata),
                        jobs: JSON.parse(jobdata),
                    })
                    // 输出在页面上
                    document.querySelector('#user-form').innerHTML = htmlStr;
                })
            })
        }
       
        // jQuery方法
        function getUserByJQ(){
            let data = {}; // 存储数据
            $.get('http://localhost:3000/users/2')
                .then(function(user){
                    data.user = user;
                    return $.get('http://localhost:3000/jobs');
                })
                .then(function(jobs){
                    data.jobs = jobs;
                    let htmlStr = template('tpl',data);
                    document.querySelector('#user-form').innerHTML = htmlStr;
                })
        }
        let data = {}; // 存储数据
        $.get('http://localhost:3000/users/2')
            .then(function(user){
                data.user = user;
                return $.get('http://localhost:3000/jobs');
            })
            .then(function(jobs){
                data.jobs = jobs;
                let htmlStr = template('tpl',data);
                document.querySelector('#user-form').innerHTML = htmlStr;
            })
    </script>
</body>
</html>